<template>
  <div id="jobTicket">
    <el-button type="primary" @click="sendKey()">返回</el-button>
    <div id="printme" ref="printDom1">
      <h3>轨行区作业票</h3>
      <table
        border="1"
        cellpadding="0"
        cellspacing="0"
        class="formTable table-bordered"
      >
        <table cellpadding="0" cellspacing="0" class="formTable table-bordered">
          <tbody>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit" style="width: 160px">
                申请单位
              </td>
              <td>
                <table style="width: 100%">
                  <tbody>
                    <tr>
                      <td
                        style="
                          width: 20%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.applyOrgName }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 20%; border-right: 1px solid #ccc"
                      >
                        申请人
                      </td>
                      <td
                        style="
                          width: 20%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.applyUserName }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 20%; border-right: 1px solid #ccc"
                      >
                        联系电话
                      </td>
                      <td style="width: 20%; padding-left: 5px">
                        {{ tableData.phone }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>

            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">施工里程</td>
              <td>
                <table style="width: 100%">
                  <tbody>
                    <tr>
                      <td
                        style="
                          width: 33%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        DK{{ tableData.mileageStartKm }}+{{
                          tableData.mileageStartM
                        }}~~DK{{ tableData.mileageEndKm }}+{{
                          tableData.mileageEndM
                        }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        施工线别
                      </td>
                      <td
                        style="
                          width: 33%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.workLineTypeName }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">入场地点</td>
              <td>
                <table style="width: 100%">
                  <tbody>
                    <tr>
                      <td
                        style="
                          width: 20%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.entryLocationName }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 20%; border-right: 1px solid #ccc"
                      >
                        出场地点
                      </td>
                      <td
                        style="
                          width: 20%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.exitLocationName }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 20%; border-right: 1px solid #ccc"
                      >
                        施工人数
                      </td>
                      <td
                        style="
                          width: 20%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.workPersonNum }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">申请作业区段(里程)</td>
              <td style="padding-left: 5px">{{ tableData.workRegion }}</td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">施工作业内容</td>
              <td style="padding-left: 5px">{{ tableData.workContent }}</td>
            </tr>

            <tr class="formTable_Row">
              <td class="formTable_label">施工机具描述</td>
              <td class="formTable_input formTable_td" colspan="3">
                {{ tableData.sgjjDesc }}
              </td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">施工负责人</td>
              <td>
                <table style="width: 100%">
                  <tbody>
                    <tr>
                      <td
                        style="
                          width: 33%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.sgzyfzr }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        现场防护员
                      </td>
                      <td
                        style="
                          width: 33%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.xcfhy }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">采用的防护措施</td>
              <td style="padding-left: 5px">{{ tableData.fhcs }}</td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">是否使用轨道车</td>
              <td>
                <table style="width: 100%">
                  <tbody>
                    <tr>
                      <td
                        style="
                          width: 12.5%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.sfsygdc }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 12.5%; border-right: 1px solid #ccc"
                      >
                        是否动火
                      </td>
                      <td
                        style="
                          width: 12.5%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.sfdh }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 12.5%; border-right: 1px solid #ccc"
                      >
                        是否占用轨道
                      </td>
                      <td
                        style="
                          width: 12.5%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.sfzygdc }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 12.5%; border-right: 1px solid #ccc"
                      >
                        是否开具动火令
                      </td>
                      <td
                        style="
                          width: 12.5%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.sfkjdhl }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">管理办公室批准情况</td>
              <td>
                <table style="width: 100%; padding-left: 5px">
                  <tbody>
                    <tr style="border-bottom: 1px solid #ccc">
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        批准作业区段
                      </td>
                      <td
                        style="
                          width: 66%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.pzzyqd }}
                      </td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ccc">
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        批准作业时间
                      </td>
                      <td
                        style="
                          width: 66%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.pzzysjStr }}
                      </td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ccc">
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        指定的轨行区出入口
                      </td>
                      <td
                        style="
                          width: 66%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.zdcrk }}
                      </td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ccc">
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        区间段内其他作业情况
                      </td>
                      <td
                        style="
                          width: 66%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.qtzy }}
                      </td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ccc">
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        需增加安全防护要求
                      </td>
                      <td
                        style="
                          width: 66%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.fhyq }}
                      </td>
                    </tr>
                    <tr>
                      <td
                        class="formTable_label"
                        style="width: 33%; border-right: 1px solid #ccc"
                      >
                        其它应注意事项
                      </td>
                      <td
                        style="
                          width: 66%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.zysx }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">审核人</td>
              <td>
                <table style="width: 100%">
                  <tbody>
                    <tr>
                      <td
                        style="
                          width: 22%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.processUserName }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 11%; border-right: 1px solid #ccc"
                      >
                        电话
                      </td>
                      <td
                        style="
                          width: 22%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.processUserPhone }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 11%; border-right: 1px solid #ccc"
                      >
                        日期
                      </td>
                      <td style="width: 33%; padding-left: 5px">
                        {{ tableData.processDate }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr class="formTable_Row">
              <td class="formTable_label focus_Unit">批准人</td>
              <td>
                <table style="width: 100%">
                  <tbody>
                    <tr>
                      <td
                        style="
                          width: 22%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.approveUserName }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 11%; border-right: 1px solid #ccc"
                      >
                        电话
                      </td>
                      <td
                        style="
                          width: 22%;
                          border-right: 1px solid #ccc;
                          padding-left: 5px;
                        "
                      >
                        {{ tableData.approveUserPhone }}
                      </td>
                      <td
                        class="formTable_label"
                        style="width: 11%; border-right: 1px solid #ccc"
                      >
                        日期
                      </td>
                      <td style="width: 33%; padding-left: 5px">
                        {{ tableData.approveDate }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
          <img class="zhang" src="/src/assets/seal.png" alt="" />
        </table>
      </table>
      <p>
        注：各申请单位无条件服从管理办公室的临时变更，申请单位临时变更作业区段作业
        内容前必须征得轨行区管理办公室的同意。
      </p>
      <div class="dailyPlanItemTable" style="margin-top: 3rem">
        <el-table
          :data="tableData2"
          stripe
          style="width: 100%"
          :header-cell-style="{
            color: '#111111',
            'text-align': 'center',
            'background-color': '#e8e8e8',
          }"
          header-row-class-name="dailyPlanItemTableHeader"
        >
          <el-table-column align="center" prop="applyTime" label="申请时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="firstApproveTime"
            label="一级审批时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="secondApproveTime"
            label="二级审批时间"
          >
          </el-table-column>
          <el-table-column align="center" prop="clickTime" label="请点时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="clickApproveTime"
            label="调度主任审批时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="writeOffApproveTime"
            label="销点时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="writeOffApproveTime"
            label="调度主任审批时间"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getdayPlanById } from "/src/http/productSchedule/dayPlan.js";

export default {
  props: ["getKey", "dailyId"],
  data() {
    return { tableData: {}, tableData2: [] };
  },
  components: {},
  created() {},
  mounted() {
    this.initialize();
  },
  methods: {
    sendKey() {
      this.getKey(1);
    },
    printme() {
      this.$print(this.$refs.printDom1);
    },
    async initialize() {
      try {
        this.tableData = await getdayPlanById({ id: this.dailyId }).then(
          (res) => {
            this.tableData2 = [res.data];
            return res.data;
          }
        );
      } catch (error) {
        console.log("接口调用出错::: ", error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
#jobTicket {
  height: 100%;
  width: 100%;
  overflow: auto;
  h3 {
    display: block;
    color: rgb(24, 144, 255);
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 1rem;
  }
  .formTable {
    background-color: white;
    color: black;
  }
}
.el-menu-vertical-jobTicket {
  width: 18rem;
  height: 61rem;
}
.constructionPlanContent {
  width: 100%;
  position: relative;
}
</style>
<style lang="less">
#jobTicket {
  h3 {
    display: block;
    color: rgb(24, 144, 255);
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 1rem;
  }
}
.formTable {
  width: 96%;
  margin-left: 2%;
  position: relative;
}
.table-bordered {
  border: 1px solid transparent;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table {
  background-color: transparent;
}
.formTable tbody tr {
  line-height: 36px;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.formTable tbody td {
  padding-left: 5px;
}
.formTable_label {
  color: #333333;
  font-weight: bold;
}
.formTable_label {
  text-align: right;

  font-size: 14px;
  padding-right: 10px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
.zhang {
  position: absolute;
  left: 1rem;
  bottom: 5rem;
}
.monthlyPlanTableHeader {
  background-color: #e8e8e8 !important;
}
</style>
